<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container">
    <el-tabs value="first" @tab-click="click">
      <el-tab-pane :lazy="true" name="first">
        <span slot="label">新订单
          <el-badge :value="newNum" class="mark"/>
        </span>
        <uncheck/>
      </el-tab-pane>
      <el-tab-pane :lazy="true" name="second">
        <span slot="label">未到货订单
          <el-badge :value="weidaoNum" class="mark"/>
        </span>
        <checked/>
      </el-tab-pane>
      <el-tab-pane :lazy="true" name="third">
        <span slot="label">订单查询</span>
        <yidao/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import uncheck from './neworder'
import checked from './weidaoorder'
import yidao from './yidaoorder'

import store from '@/store'

export default {
  name: 'ExportExcel',
  components: {
    checked,
    uncheck,
    yidao
  },
  computed: {
    newNum() {
      return store.getters.newList.length
    }, weidaoNum() {
      return store.getters.weidaohuoList.length
    }, yidaoNum() {
      return store.getters.yidaohuoList.length
    }
  }, methods: {
    click(item) {
      console.log(item)
      this.$store.dispatch('refreshNew', localStorage.ghusername).then(() => { })
      this.$store.dispatch('refreshWeidaohuo', localStorage.ghusername).then(() => { })
      this.$store.dispatch('refreshYidaohuo', localStorage.ghusername).then(() => { })
    }
  }
}
</script>

<style scoped>
.app-container {
  margin-left: 1vw;
  margin-right: 1vw;
}
</style>

